<template>
  <el-row style="width:100%;height:100%">
    <div class="accessClass">
      <h2>{{name}}的角色配置</h2>
      <el-row>
        <el-col :span="4" style="margin-left:10px">
          <el-input  v-model="search" placeholder="请输入查询内容"></el-input>
        </el-col>
        <el-col :span="20"></el-col>
      </el-row>
      <el-checkbox-group v-model="checkList"  v-for="item in filteredList" :key='item.permissionId' class="checkboxClass">
          <el-checkbox :label="item.roleName" item border></el-checkbox>
      </el-checkbox-group>
      <div style="clear:both"></div>
      <el-col :span="5" :offset="8" style="margin-top:50px">
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-col>

    </div>

  </el-row>
</template>

<script>
  import {mapActions} from 'vuex';
  export default {
    data() {
      return {
        name:'',
        userid:'',
        allCheckbox: [],
        checkList: [],
        idList: [],
        search: ""
      };
    },
    created() {
      this.name = this.$route.query.name;
      this.userid = this.$route.query.id
      this.getAllData();
    },
    methods: {
      getAllData() {
        this.$http('sys/role/list.do',{data:{pageNo:-1}}).then(resp => {
          this.allCheckbox = resp.data;
         });
      },
      getMineData() {
        this.$http('sys/user/roleList.do',{data:{userid:this.$route.query.id}}).then(resp => {
          if (resp.code != 1) {
            this.$notify({
              title: "错误",
              message: resp.msg,
              type: "error"
            });
          } else {
            for (var key in resp.data) {
              this.checkList.push(resp.data[key].roleName);
            }
          }
        });
      },
      onSubmit() {
        if(!this.$store.state.routes.routes.xtAdminToRole){
          this.$message({
            message:'无权限',
            type:'error'
          })
          return
        }
        for (var key in this.allCheckbox) {
          for (var jey in this.checkList) {
            if (this.allCheckbox[key].roleName == this.checkList[jey]) {
              this.idList.push(this.allCheckbox[key].roleId);
            }
          }
        }
        console.log(this.idList.join())
        this.$confirm("确认提交吗？", "提示", {}).then(() => {
          this.$http('sys/user/addRole.do',{data:{
            userid:this.userid,
            roleids: this.idList.join()
          }}).then(resp => {
            if (resp.code != 1) {
              this.$notify({
                title: "错误",
                message: resp.msg,
                type: "error"
              });
            } else {
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.checkList = []
              this.$router.push('xitong_admin')
            }
          });
        });
      },
    },
    computed: {
      filteredList() {

        if (this.allCheckbox.length > 0) {
          return this.allCheckbox.filter(post => {
            return post.roleName.toLowerCase().includes(this.search.toLowerCase());
          });
        }
      }
    },
    mounted() {
      this.getMineData();
    }
  };
</script>

<style scoped>
  .accessClass {
    width: 90%;
    margin: 0 auto;
  }

  .accessClass h2 {
    text-align: left;
  }

  label {
    /* width: 130px; */
    margin-bottom: 20px;
    float: left;
  }

  .el-checkbox-group > :first-child {
    margin-left: 10px;
  }

  .checkboxClass {
    margin-top: 30px;
  }
</style>

